import React, { useState } from 'react'
import Myheader from '../Myheader/Myheader'
import Centermy from '../CenterMyherf/Centermy'
import Information from '../Information/Information'
import './Userme.css'
const Userme = () => {
  const [activeTab,setActiveTab]=useState<string>('info')
  const handleTabClick=(tab:string)=>{
    setActiveTab(tab)
  }
  return (
    <div className='boxusercer'>
      <div className="center-me">
        <div className="left-usercers">
            <div className="icon-item">
                <img src="../src/assets/images/qiwa.webp" alt="" />
                <p>用户</p>
                <p>包图号:11111111</p>
            </div>
            <div className="roler-item">
                <ul>
                  <li className={`tab ${activeTab === 'info' ? 'active' : ''}`}
                  onClick={()=>handleTabClick('info')}
                  >我的信息
                  </li>
                  <li className={`tab ${activeTab === 'onecen' ? 'active' : ''}`}
                  onClick={()=>handleTabClick('onecen')}>
                    任务中心
                    </li>
                  <li className={`tab ${activeTab === 'shop' ? 'active' : ''}`}
                  onClick={()=>handleTabClick('shop')}>
                    企业主页
                    </li>
                  <li className={`tab ${activeTab === 'myvip' ? 'active' : ''}`}
                  onClick={()=>handleTabClick('myvip')}>
                    我的会员
                    </li>
                  <li className={`tab ${activeTab === 'myli' ? 'active' : ''}`}
                  onClick={()=>handleTabClick('myli')}>
                    我的礼品
                    </li>
                  <li className={`tab ${activeTab === 'myheader' ? 'active' : ''}`}
                  onClick={()=>handleTabClick('myheader')}>
                    我的下载
                    </li>
                  <li className={`tab ${activeTab === 'myxing' ? 'active' : ''}`}
                  onClick={()=>handleTabClick('myxing')}>
                    我的收藏
                    </li>
                  <li className={`tab ${activeTab === 'myfoot' ? 'active' : ''}`}
                  onClick={()=>handleTabClick('myfoot')}>
                    我的足迹
                    </li>
                  <li className={`tab ${activeTab === 'mydum' ? 'active' : ''}`}
                  onClick={()=>handleTabClick('mydum')}>
                    我的关注
                    </li>
                  <li className={`tab ${activeTab === 'centere' ? 'active' : ''}`}
                  onClick={()=>handleTabClick('centere')}>
                    消息中心
                    </li>
                </ul>
            </div>
        </div>
        <div className="right-usercers">
            {
              activeTab=== 'info' &&
              <div className="messages">
                <h2 className='jiBen'>基本信息</h2>
                <p>
                  <Information></Information>
                </p>
              </div>
            }
            {activeTab === 'onecen' && <div> <h2>任务中心</h2><p>这里是任务中心</p></div>}
            {activeTab === 'shop' && <div> <h2>企业主页</h2><p>这里是企业主页</p></div>}
            {activeTab === 'myvip' && <div> <h2>我的会员</h2><p>这里是我的会员</p></div>}
            {activeTab === 'myli' && <div> <h2>我的礼品</h2><p>这里是我的礼品</p></div>}
            {
              activeTab=== 'myheader' &&
              <div>
                <p>
                  <Myheader></Myheader>
                </p>
              </div>
            }
            {activeTab === 'myxing' && <div> <h2>我的收藏</h2><p>这里是我的收藏</p></div>}
            {activeTab === 'myfoot' && <div> <h2>我的足迹</h2><p>这里是我的足迹</p></div>}
            {activeTab === 'mydum' && <div> <h2>我的关注</h2><p>这里是我的关注</p></div>}
            {
              activeTab==='centere' &&
              <div>
                <p>
                  <Centermy></Centermy>
                </p>
              </div>
            }
        </div>
      </div>
      
    </div>
  )
}

export default Userme
